<%@ page contentType="text/html;charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html lang="zh">
<head>
  <title>学生列表</title>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"/>
</head>
<body>
<br><br>
<div class="container">
  <c:if test="${message != null}">
    <div class="alert ${status ? 'alert-success' : 'alert-danger'}" role="alert">
      ${message}
    </div>
  </c:if>
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">学生列表</h3>
    </div>
    <div class="panel-body">
      <table class="table table-striped table-hover">
        <thead>
        <tr>
          <th scope="col" style="text-align: center;">#</th>
          <th scope="col" style="text-align: center;">头像</th>
          <th scope="col" style="text-align: center;">姓名</th>
          <th scope="col" style="text-align: center;">性别</th>
          <th scope="col" style="text-align: center;">学号</th>
          <th scope="col" style="text-align: center;">专业</th>
          <th scope="col" style="text-align: center;">民族</th>
          <th scope="col" style="text-align: center;">生日</th>
          <th scope="col" style="text-align: center;"><a href="${pageContext.request.contextPath}/create.jsp">新建</a></th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="item" items="${page.rows}">
          <tr>
            <td style="text-align: center;vertical-align: middle">${item.id}</td>
            <td style="text-align: center;vertical-align: middle"><img src="${item.photo}" alt="头像" style="width: 35px; height: 35px; border-radius: 3px;"></td>
            <td style="text-align: center;vertical-align: middle">${item.name}</td>
            <c:if test="${item.gender == '男'}">
              <td style="text-align: center;vertical-align: middle"><span class="label label-danger">${item.gender}</span></td>
            </c:if>
            <c:if test="${item.gender == '女'}">
              <td style="text-align: center;vertical-align: middle"><span class="label label-success">${item.gender}</span></td>
            </c:if>
            <td style="text-align: center;vertical-align: middle">${item.number}</td>
            <td style="text-align: center;vertical-align: middle">${item.major}</td>
            <td style="text-align: center;vertical-align: middle">${item.nation}</td>
            <td style="text-align: center;vertical-align: middle"><fmt:formatDate pattern="yyyy-MM-dd" value="${item.birthday}"/></td>
            <td style="text-align: center;vertical-align: middle">
              <a href="${pageContext.request.contextPath}/student/edit/${item.id}">编辑</a>
              <a href="${pageContext.request.contextPath}/student/remove/${item.id}">删除</a>
            </td>
          </tr>
        </c:forEach>
        </tbody>
      </table>
      <%--分页--%>
      <nav aria-label="Page navigation" style="width: 100%; text-align: center; margin-top: -20px; margin-bottom: -20px">
        <ul class="pagination">
          <li>
            <c:if test="${page.current != 1}">
              <a href="${pageContext.request.contextPath}/student/page/${page.current - 1}/${page.size}"
                 aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </c:if>
            <c:if test="${page.current == 1}">
              <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </c:if>
          </li>
          <c:forEach var="i" begin="${page.current}" end="${page.current + 8}">
            <li class="${i == page.current ? 'active' : ''}"><a
              href="${pageContext.request.contextPath}/student/page/${i}/${page.size}">${i}</a></li>
          </c:forEach>
          <li>
            <c:if test="${page.current >= (page.total / page.size)}">
              <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </c:if>
            <c:if test="${page.current < (page.total / page.size)}">
              <a href="${pageContext.request.contextPath}/student/page/${page.current + 1}/${page.size}"
                 aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </c:if>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>
</body>
<style>
    ::-webkit-scrollbar {
        width: .5em;
        height: .5em
    }

    ::-webkit-scrollbar-thumb {
        background: #ccc
    }

    ::-webkit-scrollbar-track {
        background: 0 0
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</html>